<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户组</title>
    <th:block th:include="import :: links"></th:block>
</head>
<body>
<header>
    <th:block th:include="import :: navigation"></th:block>
</header>
<section class="container" style="margin-top: 60px;">
    <div class="row">
        <ol class="breadcrumb col-md-12">
            <li><a href="/index.html">首页</a></li>
            <li><a href="/group/index.html">团队</a></li>
            <li class="active" th:text="${group.groupName}">团队名称</li>
        </ol>

        <div class="jumbotron col-md-12">
            <h3 th:text="${group.groupName}">Hello, world!</h3>
            <p th:text="${group.groupDesc}"></p>
        </div>
        <div class="col-md-12" style="padding: 0px;">
            <!-- Nav tabs -->
            <ul class="nav nav-pills nav-justified" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">项目</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">人员</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content" id="groupPanel" style="min-height: 200px;border:1px solid #ddd;border-top:none;padding-top:5px;">
                <div role="tabpanel" class="tab-pane active row" id="home">
                    <div class="col-md-12">
                        <div v-for="project in projects" class="panel panel-default col-md-3 box">
                            <div class="panel-body">
                                <div class="btn-group btn-group-sm toolbar" v-if="canEdit">
                                    <a type="button" v-on:click="editProject(project.appId)" class="btn waves-effect waves-button"><i class="fa fa-lg fa-pencil-square-o"></i></a>
                                    <a type="button" v-on:click="delProject(project.appId)" class="btn waves-effect waves-button"><i class="fa fa-lg fa-times"></i></a>
                                </div>
                                <div class="box-content" v-on:click="openProject(project.appId)">
                                    <h3>{{project.appName}}</h3>
                                    <p class="text-muted" v-if="project.appDesc.length > 40">{{project.appDesc.substr(0,40)}}...</p>
                                    <p class="text-muted" v-else="">{{project.appDesc}}</p>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div class="alert small text-right" role="alert">当前版本：<span>{{project.appProdVersion}}</span></div>
                            </div>
                        </div>
                        <div class="panel panel-default col-md-3 box" th:if="${role == 1}" v-on:click="createProject(groupId)">
                            <div class="panel-body" style="height: 170px; border-bottom: 2px dashed #c0c0c0;">
                                <img th:src="@{/images/plus.png}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <div class="col-md-12">
                        <div v-for="user in users" class="panel panel-default col-md-2 box">
                            <div class="panel-body">
                                <div class="btn-group btn-group-sm toolbar" v-if="canEdit">
                                    <a type="button" v-on:click="editUser(user.uid,user.gid)" class="btn waves-effect waves-button"><i class="fa fa-lg fa-pencil-square-o"></i></a>
                                    <a type="button" v-on:click="delUser(user.uid,user.gid)"  class="btn waves-effect waves-button"><i class="fa fa-lg fa-times"></i></a>
                                </div>
                                <div class="box-content" style="height: 150px;padding-top:15px;">
                                    <img src="/images/coder.png" style="max-width: 64px;max-height: 64px;" alt="..."/>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div class="alert alert-info small text-center" role="alert" v-if="user.role==1" >{{user.nickName}}</div>
                                <div class="alert alert-success small text-center" role="alert" v-if="user.role==2" >{{user.nickName}}</div>
                                <div class="alert small text-center" role="alert" v-if="user.role==3" >{{user.nickName}}</div>
                            </div>
                        </div>
                        <div class="panel panel-default col-md-2 box" th:if="${role == 1}">
                            <div class="panel-body" style="height: 170px; border-bottom: 2px dashed #c0c0c0;" v-on:click="chooseUser(groupId)">
                                <img th:src="@{/images/plus.png}" style="height: 100px;"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<div class="modal fade" id="AllModal" tabindex="-1" aria-labelledby="dictLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">...</h4>
            </div>
            <div class="modal-body row">

            </div>
        </div>
    </div>
</div>
<footer id="footer"></footer>
<th:block th:include="import :: impJS"></th:block>
<script th:inline="javascript">
    var gid = [[${group.groupId}]];
    var URI_groupUserAndProject = "/group/" + gid + "/detail.html"
</script>
<script type="text/javascript" th:src="@{/js/group/groupDetail.js}"></script>
</body>
</html>